<template>
  <div>
    <GetBack :titles="'登陆'"/>
    <div class="loginBtn">
      <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="请填写用户名"
            :rules="[{ required: true}]"
        />
        <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="请填写密码"
            :rules="[{ required: true}]"
        />
        <van-radio-group v-model="isRecord" direction="horizontal">
          <p style="padding-left: 10px">是否记住密码：</p>
          <van-radio name="true">是</van-radio>
          <van-radio name="false">否</van-radio>

        </van-radio-group>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">登陆</van-button>
        </div>
      </van-form>
      <div class="forget">
        <span @click="toForgetThePassword">忘记密码?</span>
        <van-icon name="plus" style="padding: 4px"/>
        <span @click="toRegister">立即注册</span>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import {getLogin} from "@/api/index.api";
import {getPersonalInformation} from "@/api/myLogin.api.js";
import {Toast} from "vant";
import GetBack from "@/components/GetBack";

export default {
  name: "Logining",
  data() {
    return {
      username: '',
      password: '',
      isRecord: true,
      userInfo: null,
    };
  },
  methods: {
    onSubmit(values) {
      //登陆
      getLogin(this.username, this.isRecord, this.password).then(res => {
        if (res.code === 0) {

          //vuex改值
          this.$store.commit("changeIsLogin",{isLogin1:true})
          localStorage.setItem("islogin",this.isLogin1)

          getPersonalInformation(this.username, this.password).then(res => {
            this.userInfo = res.data
            this.$store.commit("modifyUserInfo", {userInfo1:res.data})
            this.$router.push({path: "/LoginPage", query: {userData: this.userInfo}})
          
          })
        } else {
          this.$toast(res.msg)
          Toast.fail({
            message: '请重新输入',
            position: 'top',
          });
        }
      })
      console.log('submit', values);
    },
    //注册
    toRegister() {
      this.$router.push("/Register")
    },
    //忘记密码
    toForgetThePassword() {
      this.$router.push("/ForgetThePassword")
    },
    //保存
    localstorageName() {
      if (this.isRecord) {
        localStorage.setItem("myName", this.username)
        localStorage.setItem("myPasword", this.password)
      }
    }
  },
  created() {
    this.isLogin1=localStorage.setItem("islogin")
    if (localStorage.getItem("myName")) {
      this.username = localStorage.getItem("myName")
      this.password = localStorage.getItem("myPasword")
    }
  },
  computed: {
    ...mapState({isLogin1: "isLogin"})
  },
  components: {
    GetBack,
  }
}
</script>

<style lang="less" scoped>
div {
  position: relative;
}

.loginBtn {
  padding-top: 50px;
}

.forget {
  height: 20px;
  display: flex;
  justify-content: center;
  line-height: 20px;

  span {
    //width: 90px;
    padding: 4px;
    text-align: center;
    //background-color: darkgrey;
    border-radius: 8px;
    vertical-align: middle;
  }

  span:active {
    background-color: aquamarine;
    color: darkred;
  }
}
</style>